import React, { Component, useState } from 'react';
import { Card, Modal, Row, Select, Button } from 'antd';
import TransferA from './TransferA'
import {connect} from 'dva';

const Option = Select.Option;

@connect(({})=>({}))

class Pop extends Component{
  constructor(props) {
    super(props);
    this.state = {
      allCode: [],
      select1:[] , // 1级 选项
      selectValue1: '', //1级 值
      select2:[], // 2级 选项
      selectValue2: '', // 2级 值
      disabled2: true, // 2级 禁用
      select3:[],  // 3级 选项
      selectValue3: '', // 3级值
      disabled3: true,  //3级 禁用
      visiblePop: true,
      currentIndex: 1
      // showElem:false,//显示select是否隐藏
     };;
  }

  componentDidMount(){
    this.showModalGoodTyle();  // ？？？
    const { dispatch } = this.props;

    // 获取所有货物选项
    dispatch({ type: 'cooperativeStore/getAllCode' }).then(res => {
      if ( res.code == 200){
        this.setState({
          allCode: res.data
        })
      }
    }).catch(function (err) {
      console.log(err)
    });

    // 获取所有1级货物选项
      dispatch({
          type: 'cooperativeStore/selectOneLevel',
          payload:{
            data:{}
          }
      }).then(res => {
            if ( res.code == 200){
                this.setState({
                  select1: res.data.list
                })
            }
      }).catch(function (err) {
        console.log(err)
      });
  }

  // 选项改变
  selectChange = (e, type) => {
    if(type === 1){
      console.log('选择的是1级选项，选了' + e)
      this.setState({
        selectValue1: e,
        disabled2: false,
        selectValue2: '',
        select3: [],
        selectValue3: '',
        disabled3: true,
        currentIndex: 2
      })
      // 获取所有2级货物选项
      const { dispatch } = this.props;
      dispatch({
        type: 'cooperativeStore/selectByParentCode',
        payload:{
            data:{
                "parentCode": e,
              }
        }
      }).then(res => {
        if ( res.code == 200){
            console.log("selectByParentCode:",res)
            this.state.select = res.data.list
            this.setState({
              select2: res.data.list
            })
            console.log('父组件更新state', this.state)
        }
      }).catch(function (err) {
        console.log(err)
      });
    }else if(type === 2){
      console.log('选择的是2级选项，选了' + e)
      this.setState({
        selectValue2: e,
        disabled3: false,
        selectValue3: '',
        currentIndex: 3
      })
      // 获取所有2级货物选项
      const { dispatch } = this.props;
      dispatch({
        type: 'cooperativeStore/selectByParentCode',
        payload:{
            data:{
                "parentCode": e,
              }
        }
      }).then(res => {
        if ( res.code == 200){
            console.log("selectByParentCode:",res)
            this.setState({
              select3: res.data.list
            })
        }
      }).catch(function (err) {
        console.log(err)
      });
    }else if(type === 3){
      console.log('选择的是3级选项，选了' + e)
      this.setState({
        selectValue3: e
      })
    }
  }

  // 重置选项
  onSelectReset = () => {
    // 获取所有1级货物选项
    const { dispatch } = this.props;
      dispatch({
          type: 'cooperativeStore/selectOneLevel',
          payload:{
            data:{}
          }
      }).then(res => {
            if ( res.code == 200){
                this.setState({
                  select1: res.data.list,
                  selectValue1: '', //1级 值
                  select2:[], // 2级 选项
                  selectValue2: '', // 2级 值
                  disabled2: true, // 2级 禁用
                  select3:[],  // 3级 选项
                  selectValue3: '', // 3级值
                  disabled3: true,  //3级 禁用
                  currentIndex: 1
                })
            }
      }).catch(function (err) {
        console.log(err)
      });
  }

  // “添加”按钮 并查询一级分类
  showModalGoodTyle = () => {
    this.setState({ visiblePop: true });
      const { dispatch } = this.props;
      dispatch({
          type: 'cooperativeStore/selectByParentCode',
          payload:{
              data:{
                  "parentCode": 1,
                }
          }
      }).then(res => {
            if ( res.code == 200){
                console.log("selectByParentCode:",res)
                this.setState({
                  select1:res.data.list
                })
            }
            console.log("selectArr:",this.state.selectArr)
      }).catch(function (err) {
        console.log(err)
      });
  };

  //确定弹窗
  handleOk = e => {
    console.log(e);
    this.setState({
      visiblePop: false,
    });
  };
//关闭弹窗
  handleCancel = e => {
    console.log(e);
    this.setState({
      visiblePop: false,
    });
  };

  //----------------
  
render(){
  //搜索二级货物类型
  const { dispatch } = this.props;
  function onChange(value) {
      console.log(`selected ${value}`);
      console.log("选中的货物类型：",value)
      
      dispatch({
          type: 'cooperativeStore/selectByParentCode',
          payload:{
              data:{
                  "parentCode": 1,
                  "code":"A"
                }
          }
      }).then(res => {
            if ( res.code == 200){
                console.log("selectByParentCode:",res)
                this.setState({
                  select2:res.data.list
                })
            }
            console.log("selectArr:",this.state.selectArr)
      }).catch(function (err) {
        console.log(err)
      });
    }
    
    function onBlur() {
      console.log('blur');
    }
    
    function onFocus() {
      console.log('focus');
    }
    
    function onSearch(val) {
      console.log('search:', val);
    }
  const { select1, select2, select3, selectValue1, selectValue2, selectValue3 } = this.state
  return (
        <div>
          <Button type="primary" onClick={this.showModalGoodTyle}style={{position: "absolute",right: "35px",bottom:"236px"}}>
              添加
          </Button>
          <Modal
            title="添加货物类型"
            visible={this.state.visiblePop}
            onOk={this.handleOk}
            onCancel={this.handleCancel}
            width={700}
          >
            <Row type="flex">
              {/* <Card bodyStyle={{ width: 750 }} style={{ marginRight: 45 }}> */}
                <div style={{ border: "1px solid #ddd", width: 195, height: "360px", paddingTop: 5, position: 'relative' }}>
                  <p style={{ fontSize:12, textAlign: "left", paddingLeft: 12 }}>首先在本栏选择分区所在范围，<br/>然后在待选区查看并选择。</p>
                  {/* 1级选择框 */}
                  <Select
                    showSearch
                    defaultValue = { select1 }
                    style={{ width: 180 ,float: "left", paddingLeft: 10 }}
                    placeholder = "请选择货物类型"
                    optionFilterProp = "children"
                    onChange={(e) => this.selectChange(e, 1)}
                    // onFocus={onFocus}
                    // onBlur={onBlur}
                    // onSearch={onSearch}
                    value={selectValue1}
                    filterOption={(input, option) =>
                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                >
                    {select1.map((item, index) => (
                      <Option key={item.id} value={item.code}>
                        {item.name}
                      </Option>
                    ))}
                </Select>
                {/* 2级选择框 */}
                <Select
                    showSearch
                    style={{ width: 180 ,float: "left", paddingLeft: 10, clear: "both", marginTop: 10 }}
                    placeholder = "请选择货物类型"
                    optionFilterProp = "children"
                    onChange={(e) => this.selectChange(e, 2)}
                    // onFocus={onFocus}
                    // onBlur={onBlur}
                    // onSearch={onSearch}
                    disabled={this.state.disabled2}
                    value={selectValue2}
                    filterOption={(input, option) =>
                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                >
                    {select2.map((item,index) => (
                      <Option key={item.id} value={item.code}>
                        {item.name}
                      </Option>
                    ))}
                </Select>
                {/* 3级选择框 */}
                {/* <Select
                    showSearch
                    style={{ width: 180 ,float: "left", paddingLeft: 10, clear: "both", marginTop: 10 }}
                    placeholder="请选择货物类型"
                    optionFilterProp="children"
                    onChange={(e) => this.selectChange(e, 3)}
                    // onFocus={onFocus}
                    // onBlur={onBlur}
                    // onSearch={onSearch}
                    disabled={this.state.disabled3}
                    filterOption={(input, option) =>
                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                >
                    {select3.map((item,index) => (
                      <Option key={item.id} value={item.code}>
                        {item.name}
                      </Option>
                    ))}
                </Select> */}
                <Button type="primary" size="small" style={{position: 'absolute', left: '133px', bottom: '14px'}} onClick={this.onSelectReset}>重置</Button>
              </div>

              {/* 穿梭框组件 */}
              <TransferA
                allCode={this.state.allCode}  //  所有货物选项
                select1={this.state.select1}  // 第一个选择框的选项
                select2={this.state.select2}  // 第二个选择框的选项
                select3={this.state.select3}  // 第三个选择框的选项
                currentIndex={this.state.currentIndex}  // 当前右侧展示的左侧穿梭框选项
              />
            </Row>
        </Modal>
      </div>
    );
  }
}

export default Pop;
